import React, { useState } from 'react'
import { Button, Modal, Table, Form, Input, InputNumber, message } from 'antd'

import './style.scss'
import { storeAll } from '@/store'
import Column from 'antd/es/table/Column'
import { parkingLotTypeInter } from '@/store/parkingLotType'
import { layout } from '@/utils/contants'
import { reviseParkingTypeRequest } from '@/apis/parkingType'
import { observer } from 'mobx-react-lite'

const ParkingType: React.FC = () => {
	const [open, setOpen] = useState<boolean>(false);
	const [currentType, setCurrentType] = useState<parkingLotTypeInter>()
	const [form] = Form.useForm()

	const closeModal = () => {
		setOpen(false)
	}

	const openModal = (record: parkingLotTypeInter) => {
		setCurrentType(record)
		setOpen(true)
		form.setFieldsValue(record)
	}

	const reviserParkingType = (value: parkingLotTypeInter) => {
		if (!currentType?.id) return
		value.id = currentType.id
		reviseParkingTypeRequest(value).then((res: any) => {
			message.success(res.message)
			setOpen(false)
			form.resetFields()
			storeAll.parkingLotTypeStore.getParkingLotTypeRequest()
		})
	}

	return <div className="parkingTypeWrap">
		<Table dataSource={storeAll.parkingLotTypeStore.parkingLotType} rowKey={record => record.id}>
			<Column title="一小时内价格" dataIndex="startNum" key="startNum"></Column>
			<Column title="一小时后每小时价格" dataIndex="hourNum" key="hourNum"></Column>
			<Column title="一天的价格" dataIndex="dayNum" key="dayNum"></Column>
			<Column title="一月的价格" dataIndex="monthNum" key="monthNum"></Column>
			<Column title="备注" dataIndex="notes" key="notes"></Column>
			<Column title="操作" key="options" render={(_: any, record: parkingLotTypeInter) => <div className="actionWrap">
				<Button type="primary" onClick={() => openModal(record)}>
					修改
				</Button>
			</div>}></Column>
		</Table>
		<Modal title="修改车位类型" open={open} onCancel={closeModal} footer={null}>
			<Form
				onFinish={reviserParkingType}
				form={form}
				{...layout}
			>
				<Form.Item name={['startNum']} label="一小时内价格" rules={[{ required: true, message: '请输入一小时内价格' }]}>
					<InputNumber />
				</Form.Item>
				<Form.Item name={['hourNum']} label="一小时后每小时价格" rules={[{ required: true, message: '请输入一小时后每小时价格' }]}>
					<InputNumber />
				</Form.Item>
				<Form.Item name={['dayNum']} label="一天的价格" rules={[{ required: true, message: '请输入一天的价格' }]}>
					<InputNumber />
				</Form.Item>
				<Form.Item name={['monthNum']} label="一月的价格" rules={[{ required: true, message: '请输入一月的价格' }]}>
					<InputNumber />
				</Form.Item>
				<Form.Item name={['notes']} label="备注" rules={[{ required: true, message: '请输入备注' }]}>
					<Input />
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default observer(ParkingType)